
 <template>
    <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>咨询师信息管理</span>
        <el-button class="button" type="primary" @click="btnAddDialog"  > 添加</el-button>
      </div>
    </template>
    <!-- 查询 -->
    <el-form :inline="true" :model="frmQuery" class="demo-form-inline">
        <el-form-item label="咨询师用户名">
          <el-input v-model="frmQuery.pc_name" placeholder="请输入咨询师" clearable />
        </el-form-item>
       
        <el-form-item>
          <el-button type="primary" @click="getpcName">查询</el-button>
        </el-form-item>
      </el-form>
    <!-- 表格 -->
     <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="picture" label="头像" width="120">
        <template #default="scope">
          <el-image
      style="width: 70px; height: 70px"
      :src="'http://localhost:8080/images/upload/'+scope.row.picture"     
    />
        </template>
      </el-table-column>
      <el-table-column   prop="pc_name" label="咨询师姓名" width="150" /> 
        <el-table-column prop="pc_sex" label="性别" width="120">
          <template #default="scope">
              {{ scope.row.pc_sex?"男":"女" }}
          </template>
        </el-table-column>
        <el-table-column prop="pc_email" label="邮箱" width="120" />
        <el-table-column prop="pc_phone" label="电话" width="120" />
        <el-table-column fixed="right" label="操作" width="160">
          <template #default="scope">   
            <el-button link type="primary" size="small" @click="detailDialog(scope.row.pc_uid)"
              >详情</el-button
            >
            <el-button link type="primary" size="small" @click="updateDialog(scope.row.pc_uid)">编辑</el-button>
           
            <el-popconfirm
              confirm-button-text="是"
              cancel-button-text="否"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="你确定要删除这行数据吗?"
              @confirm="deleteClick(scope.row.pc_uid)" >
              <template #reference>
                 <el-button link type="warning" size="small">删除</el-button>
              </template>
            </el-popconfirm>
           
          </template>
        </el-table-column>
      </el-table>
      <br/>
            <!-- 分页 -->
     <el-pagination
      :currentPage="currentPage"
      :page-size="pageSize"
      :page-sizes="[5,10, 20, 30, 40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    /> 
  </el-card>

  <!-- 添加对话框 -->
  <el-dialog v-model="dialogFormVisible" title="添加咨询师信息">
    <el-form :model="form1"> 
      <!-- 图片添加 -->
      <el-col :span="8"
        ><div class="grid-content ep-bg-purple" />
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/pc/upload"
          :show-file-list="false"
          :on-success="handleSuccess1"
        >
          <img v-if="form1.picture" :src="'http://localhost:8080/images/upload/'+form1.picture" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-col>
        <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="form1.pc_name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="form1.pc_password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-radio v-model="form1.pc_sex"   label="1">男</el-radio>
        <el-radio v-model="form1.pc_sex"   label="0">女</el-radio>       
      </el-form-item>
      <el-form-item label="工作经历" :label-width="formLabelWidth">
        <el-input v-model="form1.pc_work" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" :label-width="formLabelWidth">
        <el-input v-model="form1.pc_email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="联系方式" :label-width="formLabelWidth">
        <el-input v-model="form1.pc_phone" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addPc">
          添加
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 详情对话框 -->
  <el-dialog
      v-model="detailDialogVisible"
      title="咨询师详细信息"
      width="60%" 
    >
    <el-descriptions :column="5" border title="咨询师">
      <el-descriptions-item prop="picture" label="头像" width="120">
        <template #default="scope">
          <el-image
      style="width: 70px; height: 70px"
      :src="'http://localhost:8080/images/upload/'+Pc.picture"     
    />
        </template>
      </el-descriptions-item>
        <el-descriptions-item label="账号">{{Pc.pc_uid}}</el-descriptions-item>
        <el-descriptions-item label="名称">{{Pc.pc_name}}</el-descriptions-item>
        <el-descriptions-item label="性别">{{Pc.pc_sex? "男" : "女" }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{Pc.pc_phone}}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{Pc.pc_email}}</el-descriptions-item>
        <el-descriptions-item label="工作经历">{{Pc.pc_work}}</el-descriptions-item>
  </el-descriptions>
      
    </el-dialog>
  <!-- 修改对话框 -->
      <el-dialog v-model="updateDialogVisible" title="修改咨询师信息">
        <el-form :model="form">
            <el-form :model="form"> 
              <!-- 修改图片 -->
              <el-col :span="8"
        ><div class="grid-content ep-bg-purple" />
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/pc/upload"
          :show-file-list="false"
          :on-success="handleSuccess"
        >
          <img v-if="form.picture" :src="'http://localhost:8080/images/upload/'+form.picture" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-col>
            <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="form.pc_name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.pc_password" autocomplete="off" />
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-radio v-model="form.pc_sex"   label="1">男</el-radio>
            <el-radio v-model="form.pc_sex"   label="0">女</el-radio>       
          </el-form-item>
          <el-form-item label="工作经历" :label-width="formLabelWidth">
            <el-input v-model="form.pc_work" autocomplete="off" />
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="form.pc_email" autocomplete="off" />
          </el-form-item>
          <el-form-item label="联系方式" :label-width="formLabelWidth">
            <el-input v-model="form.pc_phone" autocomplete="off" />
          </el-form-item>
        </el-form>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="updatePc">
              修改
            </el-button>
          </span>
        </template>
      </el-dialog>
  </template>

  <script>
  import { ElMessage } from 'element-plus'
  import { Plus } from "@element-plus/icons-vue"; //图片上传plus
  export default {
    components: {  Plus },
    data(){
        return{
          imageUrl: "",//图片url
        currentPage: 1,
        pageSize: 5,
        pageInfo: {},
        frmQuery: {
          pc_uid: ""
        },              // 
        formLabelWidth: "140px",
        form: {},
        form1: {
          picture:'',
          pc_name:'',
          pc_password:'',
          pc_sex:'',
          pc_email:'',
          pc_work:'',
          pc_phone:'',
          user_power: '2',
        },
        dialogFormVisible: false,    //添加对话框 
        updateDialogVisible: false,  //修改对话框
        detailDialogVisible: false,  //详情对话框
        tableData: [],
        Pc: {}
        }
    },//
    mounted() {
      this.LoadData()          // 加载学生信息
      this.getData(1,5) //分页
    },
    methods:{
      handleSuccess(response) {
      console.log(response);
      //this.imageUrl ="http://localhost:8080/images/upload/"+ response; //图片上传成功的回流函数
      this.form.picture =  response;
    },
    handleSuccess1(response) {
      console.log(response);
      //this.imageUrl ="http://localhost:8080/images/upload/"+ response; //图片上传成功的回流函数
      this.form1.picture =  response;
    },
      // 分页
      getData(num,size) {
        this.$http.get("http://localhost:8080/pc/page", {
          params: {
            pageNum: num,
            pageSize: size,
          },
        }
        ).then((response) => {
          this.pageInfo = response.data
          this.tableData = this.pageInfo.list 
        }).catch((err) => {
          console.log(err);
      })
    },
      handleSizeChange(pageSize){
        this.pageSize = pageSize
        this.getData(this.currentPage,this.pageSize)
        console.log("size",pageSize)

      },
      handleCurrentChange(pageNum){
        this.currentPage = pageNum
        this.getData(this.currentPage,this.pageSize)
        console.log("num",pageNum)

      },
      getpcName(){//查询
          console.log(this.frmQuery.pc_name);   
          this.$http.get("http://localhost:8080/pc/query/"+this.frmQuery.pc_name).then((res)=>{
          this.tableData = res.data
          console.log(res.data);
        }).catch((err)=>{
          console.log(err);
        })
        },
      LoadData(){         // 加载学生信息数据 
        this.$http.get("http://localhost:8080/pc/list?pc_uid=" + this.frmQuery.pc_uid).then((res)=>{
          this.tableData = res.data
          console.log(res.data);
        }).catch((err)=>{
          console.log(err);
        })
      }, 
      updatePc(){
         this.form.pc_sex = Number(this.form.pc_sex)
        console.log(this.form);
        this.$http.post("http://localhost:8080/pc/update",this.form).then((res)=>{
            console.log(res.data);
            if(res.data==1){
                console.log("修改成功！");
                this.form = {}     // 清空表单对象
                this.updateDialogVisible=false;    // 关闭修改对话框
                this.LoadData()    // 重新加载数据
                ElMessage({
                  message: '修改成功！',
                  type: 'success',
                })
  
              }else{
                console.log("修改失败！");
                ElMessage({
                  message: '修改失败！',
                  type: 'warning',
                })
              }
          }).catch((err)=>{
  
          })
      },
      addPc(){
        this.form1.pc_sex = Number(this.form1.pc_sex)
        console.log(this.form1.pc_sex)
        this.$http.post("http://localhost:8080/pc/add",this.form1).then((res)=>{
            console.log(res.data);
            if(res.data==1){
                console.log("添加成功！");
                this.form1 = {}
                this.dialogFormVisible=false;
                this.LoadData()
                ElMessage({
                  message: '添加成功！',
                  type: 'success',
                })
              }else{
                console.log("添加失败！");
                ElMessage({
                  message: '添加失败！',
                  type: 'warning',
                })
              }
          }).catch((err)=>{
  
          })
      },
      
      deleteClick(pc_uid){      // 删除操作
        console.log(pc_uid);
        this.$http.get("http://localhost:8080/pc/del/"+pc_uid).then((res)=>{
              console.log(res.data);
              if(res.data==1){
                console.log("删除成功！");
                this.LoadData()
                ElMessage({
                  message: '删除成功！',
                  type: 'success',
                })
              }else{
                console.log("删除失败！");
                ElMessage({
                  message: '删除失败！',
                  type: 'warning',
                })
              }
          }).catch((err)=>{
  
          })
      },
  
      updateDialog(pc_uid){      // 编辑操作
      
        console.log(pc_uid);
          this.$http.get("http://localhost:8080/pc/get/"+pc_uid).then((res)=>{
              console.log(res.data);
              this.form = res.data
              this.form.stu_sex = this.form.pc_name?"1":"0"
          }).catch((err)=>{

          })
        this.updateDialogVisible = true
      },
        detailDialog(pc_uid){     // 详情操作
          console.log(pc_uid);
          this.$http.get("http://localhost:8080/pc/get/"+pc_uid).then((res)=>{
              console.log(res.data);
              this.Pc = res.data
          }).catch((err)=>{
  
          })
  
          this.detailDialogVisible = true
        },
        btnAddDialog(){
           
            this.dialogFormVisible = true
        }
    }
  }
  </script>
  
  <style scoped>
  .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  }
  
  .text {
  font-size: 14px;
  }
  
  .item {
  margin-bottom: 18px;
  }
  
  .box-card {
  width: 100%;
  }
  </style>
  <!--这些是对话框右边图片上传的样式-->
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>